<template>
  <!-- 上传框 -->
  <el-upload
      name="files"
      :action="action"
      :show-file-list="false"
      multiple
      drag
      :on-success="callPageRefresh"
  >
    <el-icon class="el-icon--upload">
      <upload-filled/>
    </el-icon>
    <div class="el-upload__text">
      将文件拖拽到这里 或者 <em>点击这里选择上传</em>
    </div>
  </el-upload>
</template>

<script>
import {UploadFilled} from '@element-plus/icons-vue'

export default {
  name: 'FileUpload',
  components: {
    UploadFilled
  },
  props: {
    msg: String
  },
  data() {
    return {
      hostname: window.location.hostname,
      port: window.location.port,
      action: 'http://localhost:3000/upload'
    };
  },
  created() {
    this.action = this.getUploadUrl();
  },
  methods: {
    getUploadUrl() {
      // 根据访问者的 IP 或域名返回不同的 URL
      return `http://${this.hostname}:${this.port}/upload`;
    },
    callPageRefresh() {
      this.$emit('refresh');
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
